<script setup lang="ts">
/**
 * Spacer
 *
 * @description 使用 Spacer (一个指定高度的无内容块元素)而不是 margin
 * 在视图元素之间创建间隔（最直接的避免 margin 塌陷的方式）。封装此组件仅仅
 * 为了语义能更加明确。
 *
 * @property width - 宽度，若省略则为0。
 * @property height - 高度，若省略则为0。
 * @property unit - 单位，默认为 rpx。
 */
const props = withDefaults(defineProps<{
  width?: string | number
  height?: string | number
  unit: string
}>(), {
  width: '0',
  height: '0',
  unit: 'rpx',
})
</script>

<template>
  <view :style="{ width: `${props.width || 0}${unit}`, height: `${props.height || 0}${unit}` }" />
</template>
